<template>
    <div class="reservation-form">
        <el-card class="form-card">
            <el-steps :active="currentStep" finish-status="success" align-center>
                <el-step title="选择科室" icon="el-icon-document" description="选择预约科室"></el-step>
                <el-step title="选择医生" icon="el-icon-user" description="选择预约医生"></el-step>
                <el-step title="填写信息" icon="el-icon-edit-outline" description="填写预约信息"></el-step>
                <el-step title="确认预约" icon="el-icon-check" description="确认预约信息"></el-step>
            </el-steps>

            <div class="form-container">
                <!-- Step 1: 选择科室 -->
                <el-form :model="form" v-show="currentStep === 0" label-width="100px">
                    <el-form-item label="选择科室" required>
                        <el-select v-model="form.department" placeholder="请选择科室">
                            <el-option v-for="(department, index) in departments" :key="index" :label="department"
                                :value="department"></el-option>
                        </el-select>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="nextStep">下一步</el-button>
                    </el-form-item>
                </el-form>

                <!-- Step 2: 选择医生 -->
                <el-form :model="form" v-show="currentStep === 1" label-width="100px">
                    <el-form-item label="选择医生" required>
                        <el-select v-model="form.doctor" placeholder="请选择医生">
                            <el-option v-for="(doctor, index) in doctors" :key="index" :label="doctor.name"
                                :value="doctor.name"></el-option>
                        </el-select>

                    </el-form-item>

                    <el-form-item>
                        <el-button @click="prevStep">上一步</el-button>
                        <el-button type="primary" @click="nextStep">下一步</el-button>
                    </el-form-item>
                </el-form>

                <!-- Step 3: 填写信息 -->
                <el-form :model="form" v-show="currentStep === 2" label-width="100px">
                    <el-form-item label="姓名" required>
                        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="年龄" required>
                        <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
                    </el-form-item>

                    <el-form-item label="联系电话" required>
                        <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>

                    <el-form-item label="预约时间" required>
                        <el-date-picker v-model="form.reservationTime" value-format="yyyy-MM-dd"
                            placeholder="选择预约时间"></el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="prevStep">上一步</el-button>
                        <el-button type="primary" @click="nextStep">下一步</el-button>
                    </el-form-item>
                </el-form>

                <!-- Step 4: 确认预约 -->
                <div v-show="currentStep === 3" class="confirmation-section">
                    <h2>确认预约信息</h2>
                    <div class="confirmation-details">
                        <p><strong>科室：</strong>{{ form.department }}</p>
                        <p><strong>医生：</strong>{{ form.doctor }}</p>
                        <p><strong>姓名：</strong>{{ form.name }}</p>
                        <p><strong>年龄：</strong>{{ form.age }}</p>
                        <p><strong>联系电话：</strong>{{ form.phone }}</p>
                        <p><strong>预约时间：</strong>{{ form.reservationTime }}</p>
                    </div>

                    <div class="confirmation-buttons">
                        <el-button @click="prevStep">上一步</el-button>
                        <el-button type="primary" @click="nextStep">提交预约</el-button>
                    </div>
                </div>
                <el-form :model="form" v-show="currentStep === 4 && !reservationSuccess" label-width="100px">
                    <el-form-item label="支付金额" required>
                        <el-input v-model="form.paymentAmount" placeholder="请输入支付金额"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="prevStep">上一步</el-button>
                        <el-button type="primary" @click="makePayment">支付</el-button>
                    </el-form-item>
                </el-form>
                <el-result v-if="reservationSuccess" icon="success" title="成功提示" subTitle="请根据提示进行操作">
                    <template slot="extra">
                        <el-button type="primary" size="medium" @click="backToHome">返回</el-button>
                    </template>
                </el-result>
            </div>
        </el-card>
    </div>
</template>
  
<script>
import axios from 'axios'
export default {
    data() {
        return {
            currentStep: 0,
            reservationSuccess: false,
            form: {
                department: '',
                doctor: '',
                name: '',
                age: '',
                phone: '',
                reservationTime: '',
                paymentAmount: 20, // Added paymentAmount field
                state: 1
            },
            timeFormat: 'yyyy-MM-dd',
            doctors: [],
            departments: []
        };
    },
    mounted() {
        this.fetchDepartments()
      

    },
    computed: {
        user() {
            return this.$store.state.user;
        },
    },
    methods: {
        fetchDepartments() {
            axios.get('http://127.0.0.1:3000/api/doctors-departments')
                .then(response => {
                    this.departments = response.data;
                })
                .catch(error => {
                    console.error('Error fetching departments:', error);
                });
        },

        nextStep() {
            if (this.currentStep < 4) {
                this.currentStep++;
                if (this.currentStep === 1) {
                    this.fetchDoctors();
                }
            }
        },
        prevStep() {
            if (this.currentStep > 0) {
                this.currentStep--;
            }
        },
        fetchDoctors() {
            const selectedDepartment = this.form.department;
            axios.get(`http://127.0.0.1:3000/api/doctors-by-department/${selectedDepartment}`)
                .then(response => {
                    this.doctors = response.data;
                })
                .catch(error => {
                    console.error('Error fetching doctors:', error);
                });
        },

        submitForm() {
            console.log('Form submitted:', this.form);
        },
        makePayment() {
            // Simulate payment process (you can integrate with a payment gateway)
            if (this.form.paymentAmount) {
                // Perform the payment process (e.g., call a payment API)
                // If payment is successful, complete the reservation
                setTimeout(() => {
                    this.completeReservation();
                }, 1000); // Delay for 3 seconds
            } else {
                // Handle case when payment amount is not provided
                alert('Please enter a valid payment amount.');
            }
        },
    completeReservation() {
            // 创建新 addreser 记录
            const newAddreser = {
                name: this.form.name,
                doctor: this.form.doctor,
                paymentAmount: this.form.paymentAmount,
                phone: this.form.phone,
                reservationTime: this.form.reservationTime,
                state: this.form.state,
                department: this.form.department,
            };

            // 发送 POST 请求
            axios.post('http://127.0.0.1:3000/api/addreser', newAddreser)
                .then(response => {
                    // 请求成功
                    console.log('Reservation completed:', response.data);
                    alert('预约请求已发出！'); // 提示用户预约请求已发出
                    this.reservationSuccess = true;
                })
                .catch(error => {
                    // 请求失败
                    console.error('Error completing reservation:', error);
                    alert('预约请求失败，请重试！'); // 提示用户请求失败
                });

        },
        backToHome() {
            this.$router.push(`/useradmin/userhome`)
        }
    },

};
</script>

  
<style scoped>
.confirmation-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.confirmation-details {
    margin-bottom: 20px;
    /* Adjust as needed */
}

.confirmation-buttons {
    display: flex;
    justify-content: center;
}

.reservation-form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.form-card {
    width: 80%;
}

.form-container {
    margin-top: 20px;
}

/* Add your additional styles if needed */
</style>
  